<!-- @Author: Yu_Bo -->
<template>
	<view class="details">
		<view class="book_list">
			<view class="list_order" v-for="(item,index) in goods_order" :key="index">
				<view class="img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="title">
						<view class="title_txt line_one">
							{{item.goods_name}}
						</view>
						<view class="title_icon" @click="searchBtn(item)">
							<image src="@/static/images/img/search_icon.png" mode=""></image>
						</view>
					</view>
					<view class="txt line_one">
						{{item.author}}/{{item.press}}
					</view>
					<view class="sku">
						{{item.condition==1?'新书':'二手'}}
						<text>x{{item.total_num}}</text>
					</view>
					<view class="bot">
						<text>货架号：{{shelftxt(item.shelf_number)}}</text>
					</view>
					<view class="txt">
						剩余库存：{{item.book_num}}
					</view>
					<view class="txt">
						可调拨量：{{item.supply}}
					</view>
				</view>
				<view class="btn" @click="scancodeBtn" v-if="item.is_out == 0">
					去出库
				</view>
				<view class="btn btn_color" v-if="item.is_out == 1">
					已出库
				</view>
			</view>
		</view>
		<!-- 订单编号 -->
		<view class="details_box">
			<view class="left">
				订单编号
			</view>
			<view class="right">
				{{order_no}}
			</view>
		</view>
		<!-- 收货人 -->
		<view class="details_box">
			<view class="left">
				收货人
			</view>
			<view class="right">
				{{name}}
			</view>
		</view>
		<!-- 联系电话 -->
		<view class="details_box">
			<view class="left">
				联系电话
			</view>
			<view class="right">
				{{phone}}
			</view>
		</view>
		<!-- 下单时间 -->
		<view class="details_box">
			<view class="left">
				下单时间
			</view>
			<view class="right">
				{{createtime}}
			</view>
		</view>
		<!-- 扫码出库成功 -->
		<c-entryexit ref="entryexit" :type="2"></c-entryexit>
		<!-- 查询货架号 -->
		<c-searchbox ref="searchbox"></c-searchbox>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return{
				id: "",
				goods_order: [],
				order_no: "",
				name: "",
				phone: "",
				createtime: "",
			}
		},
		computed: {},
		onLoad(opt) {
			if(opt.id) {
				this.id = opt.id
				this.getDetails()
			}
		},
		onShow() {},
		methods: {
			// 获取详情
			getDetails() {
				var that = this
				var params = {
					order_id: that.id
				}
				that.$httpApi.outDetail(params).then((res) => {
					if (res.code == 1) {
						that.goods_order = res.data.goods_order
						that.order_no = res.data.order_no
						that.name = res.data.name
						that.phone = res.data.phone
						that.createtime = res.data.createtime
					}
				})
			},
			shelftxt(arr) {
				if(arr && arr.length) {
					return arr.join("；")
				}
			},
			// 扫码出库
			scancodeBtn(item) {
				var that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log(res)
						if(res.result) {
							that.outSuccess(res.result, item)
						} else {
							that.$tips.showToast("未识别到条码内容")
						}
					}
				});
			},
			// 出库成功
			outSuccess(val, item) {
				var that = this
				var params = {
					goods_order_id: that.id,
					shelf_number: val
				}
				that.$httpApi.transferOut(params).then((res) => {
					if (res.code == 1) {
						that.$refs.entryexit.openBtn(item)
						that.getDetails()
					}
				})
			},
			// 查询
			searchBtn(item) {
				this.$refs.searchbox.openBtn(item)
			},
		},
	}
</script>

<style lang='scss' scoped>
	.details {
		width: 100%;
		min-height: 100vh;
		padding: 30rpx;
		background: #f6f6f6;
		
		.book_list {
			width: 100%;
			
			.list_order {
				position: relative;
				width: 100%;
				padding: 30rpx;
				margin-bottom: 30rpx;
				background: #ffffff;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				
				.img {
					width: 140rpx;
					height: 188rpx;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				
				.info {
					width: calc(100% - 140rpx);
					padding-left: 30rpx;
					
					.title {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.title_txt {
							width: calc(100% - 50rpx);
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #222222;
						}
						
						.title_icon {
							width: 50rpx;
							height: 50rpx;
							padding: 9rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							
							image {
								display: block;
								width: 100%;
								height: 100%;
							}
						}
					}
					
					.txt {
						width: 100%;
						padding-top: 15rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
					
					.sku {
						width: 100%;
						padding-top: 15rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #5A68FF;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						text {
							color: #666666;
						}
					}
					
					.bot {
						width: 100%;
						padding-top: 15rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
				
				.btn {
					position: absolute;
					bottom: 30rpx;
					right: 30rpx;
					z-index: 1;
					width: 144rpx;
					line-height: 58rpx;
					text-align: center;
					border-radius: 29rpx;
					border: 2rpx solid #5A68FF;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #5A68FF;
				}
				
				.btn_color {
					border: 2rpx solid #999999;
					color: #999999;
				}
			}
			
			.list_order:last-child {
				margin-bottom: 0;
			}
		}
		
		.details_box {
			width: 100%;
			margin-top: 30rpx;
			padding: 30rpx;
			background: #ffffff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
			
			.right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				display: flex;
				align-items: center;
			}
		}
	}
</style>